<%@page import="java.util.List"%>
<%@page import="java.util.Set"%>
<%@page import="com.vividsolutions.jts.geom.Point"%>
<%@page import="controller.UsuarioController"%>
<%@page import="controller.EstiloPontoGastronomicoController"%>
<%@page import="controller.TipoPontoGastronomicoController"%>
<%@page import="view.UsuarioBean"%>
<%@page import="view.EstiloPontoGastronomicoBean"%>
<%@page import="view.TipoPontoGastronomicoBean"%>
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
   <head>
      <link rel="shortcut icon" href="/img/favicon.png"/>
      <title>GastroMap - Início</title>
      <%@include file="/_include.html"%>
      <script src="/js/consulta.js"></script>
      <script src="/js/index.js"></script>
   </head>
   <body>
      <!-- Barra de navegação -->
      <%@include file="/_navbar.jsp" %>
      
      <!-- Conteúdo -->
      <div class="container-fluid">
         <div class="row-fluid">
            <div id="responseContainer" class="text-center">
               <div id="responseDiv">
               </div>
            </div>
         </div>
         <div class="row-fluid">
            <div class="span3">
               <div class="tabbable">
                  <!-- Abas do menu lateral -->
                  <ul class="nav nav-tabs">
                     <li class="active">
                        <a href="#tab1" data-toggle="tab">Pesquisas</a>
                     </li>
                     <li>
                        <a href="#tab2" data-toggle="tab">Rotas</a>
                     </li>
                  </ul>
                  <!-- Conteúdo das abas -->
                  <div class="tab-content">
                     <!-- Aba 1 (Pesquisas) -->
                     <div class="tab-pane active" id="tab1">
                        <form name="busca">
                           <div class="well sidebar-nav">
                              <ul class="nav nav-list">
                                 <li class="nav-header">
                                    Crit&eacute;rios de pesquisa
                                 </li>
                                 <!-- Distância -->
                                 <li>
                                    <div class="input-prepend input-append span12">
                                       <span class="add-on">Dist&acirc;ncia máxima</span>
                                       <input id="distancia" class="span4" name="distancia" type="number" min="0"/>
                                       <span class="add-on">m</span>
                                    </div>
                                 </li>
                                 <!-- Preço -->
                                 <li>
                                    <div class="input-prepend input-append span12">
                                       <span class="add-on">Pre&ccedil;o m&aacute;ximo (R$)</span>
                                       <input id="preco" name="preco" class="span3" type="number" min="0"/>
                                       <span class="add-on">,00</span>
                                    </div>
                                 </li>
                                 <!-- Tipos de estabelecimentos -->
                                 <li class="dropdown span11">
                                    <a id="tiposEstabelecimentos" href="#" class="dropdown-toggle" data-toggle="dropdown">
                                       Tipos de estabelecimentos<b class="caret"></b>
                                    </a>
                                    <select id="opcoesTipos" name="tipos" class="span12" multiple>
                                       <%
                                          List<TipoPontoGastronomicoBean> listaTipos = new TipoPontoGastronomicoController().recuperar();
                                          for (int i = 0; i < listaTipos.size(); i++) {
                                             String nomeTipo = listaTipos.get(i).getTipo();
                                             out.println("<option value='" + nomeTipo + "'>" + nomeTipo + "</option>");
                                          }
                                       %>
                                    </select>
                                 </li>
                                 <!-- Estilos/especialidades -->
                                 <li class="dropdown span11">
                                    <a id="estilosEstabelecimentos" href="#" class="dropdown-toggle" data-toggle="dropdown">
                                       Estilos ou especialidades<b class="caret"></b>
                                    </a>
                                    <select id="opcoesEstilos" name="estilos" class="span12" multiple>
                                       <%
                                          List<EstiloPontoGastronomicoBean> listaEstilos = new EstiloPontoGastronomicoController().recuperar();
                                          for (int i = 0; i < listaEstilos.size(); i++) {
                                             String nomeEstilo = listaEstilos.get(i).getEstilo();
                                             out.println("<option value='" + nomeEstilo + "'>" + nomeEstilo + "</option>");
                                          }
                                       %>
                                    </select>
                                 </li>
                                 <!-- Horário de abertura -->
                                 <li>
                                    <div class="input-prepend">
                                       <span class="add-on">Abre &agrave;s</span>
                                       <input id="horario1" type="text" name="abertura" class="span5" placeholder="hh:mm" pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]"/>
                                    </div>
                                 </li>
                                 <!-- Horário de fechamento -->
                                 <li>
                                    <div class="input-prepend">
                                       <span class="add-on">Fecha &agrave;s</span>
                                       <input id="horario2" type="text" name="fechamento" class="span5" placeholder="hh:mm" pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]"/>
                                    </div>
                                 </li>
                                 <!-- Avaliação Mínima -->
                                 <li>
                                    <div class="input-prepend">
                                       <span class="add-on">Avaliação Mínima</span>
                                       <input id="avaliacao" type="number" name="avaliacao" min="0" max="10" class="span5"/>
                                    </div>
                                 </li>
                                 <!-- Descrição/cardápio -->
                                 <li>
                                    <label class="control-label">
                                       Descrição ou detalhes de cardápio
                                    </label>
                                    <textarea id="descricao" name="descricao" class="span12 no-horizontal-resize"></textarea>
                                 </li>
                                 <!-- Somente abertos? -->
                                 <li>
                                    <label class="checkbox">
                                       <input id="abertosCheck" name="abertosCheck" type="checkbox"/>
                                       Mostrar apenas estabelecimentos que podem estar abertos
                                    </label>
                                 </li>
                              </ul>
                              <div class="form-actions text-center">
                                 <!-- Botão Limpar -->
                                 <button type="reset" class="btn btn-danger">
                                    <i class="icon-remove icon-white"></i>
                                    Limpar
                                 </button>
                                 <!-- Botão Pesquisar -->
                                 <button id="searchButton" type="button" class="btn btn-primary">
                                    <i class="icon-search icon-white"></i>
                                    Pesquisar
                                 </button>
                              </div>
                           </div>
                        </form>
                     </div>
                     <!-- Aba 2 (Rotas) -->
                     <div class="tab-pane" id="tab2">
                        <div id="directionsPanel">
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <!-- Direita -->
            <div class="span9">
               <!-- Entrada de endereço -->
               <div>
                  <label>
                     <strong>Digite um endereço ou clique no mapa para definir um ponto de partida.</strong>
                  </label>
                  <input class="input-xxlarge" id="addressInput" name="addressInput" placeholder="Rua ou avenida, número, cidade, estado ou CEP"/>
                  <button id="markButton" type="button" class="btn btn-success">
                     <i class="icon-flag icon-white"></i>
                     Marcar ponto
                  </button>
               </div>               
               <!-- Mapa -->
               <!-- Se o usuário estiver logado, centraliza e coloca um marcador na localização padrão dele -->
               <div id="googleMap"></div>
               <%
                  UsuarioBean usuarioSessao = (UsuarioBean) session.getAttribute("usuario");
                 
                  if (usuarioSessao != null) {
                     
                     // Obtém as preferências do usuário
                     int distanciaMax = usuarioSessao.getRegiaoAbrangencia();
                     float precoMax = usuarioSessao.getGastoMedio();
                     Set<TipoPontoGastronomicoBean> tipos = usuarioSessao.getTiposPreferidos();
                     Set<EstiloPontoGastronomicoBean> estilos = usuarioSessao.getEstilosPreferidos();
                     Point geolocalizacao = usuarioSessao.getGeolocalizacaoPadrao();
                     
                     // Obtém a latitude e longitude da geolocalização padrão
                     double latitude = geolocalizacao.getX();
                     double longitude = geolocalizacao.getY();
                     String latLng = "new google.maps.LatLng(" + latitude + ", " + longitude +")";
                     
                     // Aqui fazemos a definição de algumas variáveis javascript contendo as
                     // preferências do usuário.
                     // Elas serão usadas para inicializar campos e objetos da interface
                     // onde essas preferências forem necessárias.
                     // Por exemplo, para já colocar um marcador na geolocalização padrão
                     // do usuário no mapa, quando ele estiver logado).
                     StringBuilder javaScript = new StringBuilder();
                     javaScript.append("var _prefsUsuario = {");
                     javaScript.append("geolocalizacao:");
                     javaScript.append(latLng);
                     javaScript.append(",distanciaMax:");
                     javaScript.append(distanciaMax);
                     javaScript.append(",precoMax:");
                     javaScript.append(precoMax);
                     javaScript.append(",tipos:[");
                     TipoPontoGastronomicoBean[] tiposArray = (TipoPontoGastronomicoBean[])
                        tipos.toArray(new TipoPontoGastronomicoBean[tipos.size()]);
                     for (int i = 0; i < tiposArray.length-1; ++i) {
                        javaScript.append("'");
                        javaScript.append(tiposArray[i].getTipo());
                        javaScript.append("',");
                     }
                     if (tiposArray.length > 0) {
                        javaScript.append("'");
                        javaScript.append(tiposArray[tiposArray.length-1].getTipo());
                        javaScript.append("'");
                     }
                     javaScript.append("],estilos:[");
                     EstiloPontoGastronomicoBean[] estilosArray = (EstiloPontoGastronomicoBean[])
                        estilos.toArray(new EstiloPontoGastronomicoBean[estilos.size()]);
                     for (int i = 0; i < estilosArray.length-1; ++i) {
                        javaScript.append("'");
                        javaScript.append(estilosArray[i].getEstilo());
                        javaScript.append("',");
                     }
                     if (estilosArray.length > 0) {
                        javaScript.append("'");
                        javaScript.append(estilosArray[estilosArray.length-1].getEstilo());
                        javaScript.append("'");
                     }
                     javaScript.append("]");
                     javaScript.append("};");

                     // Inclusão do código javascript com as variáveis
                     out.println("<script>");
                     out.println(javaScript.toString());
                     out.println("</script>");
                  }
               %>
            </div>
         </div>

         <!-- Rodapé -->
         <%@include file="/_footer.jsp" %>
      </div>
   </body>
</html>
